<template>
	<view class="topUp">
		<view :style="{backgroundImage: 'url('+imageURL+')'}" class="top">
			<view class="left">
				<image :src="userInfo.wxImg" mode="widthFix"></image>
				<view>{{userInfo.wxName}}</view>
			</view>
			<view class="right"></view>
		</view>
		<u-notice-bar :text="notice"></u-notice-bar>
		<view class="nav">
			<view v-for="(item,index) in list" :key="index" class="list" @click="topUpClick(item)">
				<view class="listTop">
					<view style="font-weight: 700;">
						<image style="width: 35rpx;" src="http://applet.atptest.com/23042307.png" mode="widthFix">
						</image>
						{{item.amount}}
					</view>
					<text v-if="item.giftAmount" style="font-size: 20rpx;color: #4A95BF;">送{{item.giftAmount}}余额</text>
				</view>
				<text style="color: #fff;padding: 8rpx 0;">￥{{item.amount}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex' // vuex
	import {
		ListRecharge,
		CreateRechargeOrders,
		GenerateRechargeOrder
	} from '../../../api/balance.js'
	import {
		GetBroadcastOpen
	} from '../../../api/user.js'
	export default {
		data() {
			return {
				imageURL: "http://applet.atptest.com/23042304.jpg",
				notice: '',
				list: []
			};
		},
		computed: {
			...mapState('user', ['userInfo']), // vuex
		},
		methods: {
			topUpClick(i) {
				const _that = this
				uni.showModal({
					content: '该金额将充值至公司账户，确认继续充值',
					success: (res) => {
						if (res.confirm) {
							_that.getCreateRechargeOrders({
								amount: i.amount,
								giftAmount: i.giftAmount
							})
						}
					}
				})
			},
			// 获取充值余额配置
			async getListRecharget() {
				const res = await ListRecharge()
				this.list = res
			},
			// 创建充值订单
			async getCreateRechargeOrders(i) {
				const res = await CreateRechargeOrders(i)
				this.getPay(res)
			},
			// 获取支付数据
			getPay(e) {
				GenerateRechargeOrder({
					orderNo: e
				}).then((res) => {

					const _that = this
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,

						success: function(res) {
							// 成功回调
							uni.showToast({
								title: '支付成功！！',
								duration: 2000,
							});
							uni.reLaunch({
								url: '/pagesB/pages/memberCenter/memberCenter'
							})
						},
						fail: function(err) {
							uni.showToast({
								title: '取消支付',
								duration: 2000,
							});
						}
					});
				})
			},

			// 获取广播
			async _GetBroadcastOpen() {
				const res = await GetBroadcastOpen()
				if (res.code == 400) {
					this.notice = ''
				} else {
					this.notice = res
				}
			}
		},
		onShow() {
			this._GetBroadcastOpen()
			this.getListRecharget()
		}
	}
</script>

<style lang="scss" scoped>
	.topUp {
		.top {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			padding: 70rpx 50rpx 0;
			height: 240rpx;
			background-size: 100%;
			color: #fff;
			box-sizing: border-box;

			.left {
				display: flex;
				align-items: baseline;

				image {
					width: 138rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
		}

		.nav {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 54rpx;
			background: rgb(255, 255, 255);
			box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);

			.list {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 32rpx 22rpx 0;
				background-color: #3E56BA;
				border-radius: 18rpx;
				width: 190rpx;

				.listTop {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 95%;
					height: 60%;
					margin-top: 4rpx;
					background-color: #fff;
					padding: 8rpx 0;
					border-radius: 18rpx 18rpx 0 0;
				}
			}
		}

	}

	/deep/ .u-button--info {
		color: #fff !important;
		background-color: #4058bb !important;
		border-color: #4058bb !important;
	}

	/deep/ .u-button {
		height: 50rpx !important;
	}

	/deep/ .u-button--normal {
		padding: 2rpx 36rpx !important;
	}

	/deep/ .u-button--square {
		border-bottom-left-radius: 25rpx !important;
		border-bottom-right-radius: 25rpx !important;
		border-top-left-radius: 25rpx !important;
		border-top-right-radius: 25rpx !important;
	}
</style>
